<template>
  <div>
    <!-- 2.配置首页路由，并实现布局样式 -->
    <!-- 6.使用vant实现热销推荐触底加载下一页数据 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <router-link v-for="item in list" :key="index" :to="'/detail/' + item">
        <van-card
          :num="item"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        />
      </router-link>
    </van-list>
  </div>
</template>
<script setup>
import { onActivated, ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
// console.log(route);
const list = ref(10);
const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    list.value += 10;

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value >= 40) {
      finished.value = true;
    }
  }, 1000);
};
window.onscroll = function () {
  if (route.fullPath == "/home") {
    localStorage.setItem("scrollTop", document.documentElement.scrollTop);
  }
};
onActivated(() => {
  if (route.fullPath == "/home") {
    document.documentElement.scrollTop = localStorage.getItem('scrollTop')
  }
});
</script>
<style scoped>
</style>